<template>
  <div class="label-wrapper">
    <div class="searchBlock">
      <el-input
        class="labelInput"
        placeholder="请添加标签"
        v-model="tagName">
      </el-input>
      <el-button 
        type="primary"
        @click="addLabel">添加</el-button>
    </div>
    <el-table
      :data="labelData"
      border
      v-loading="loading"
      element-loading-text="阿理玩命加载中"
      style="width: 900"
      max-height="500">
      <el-table-column
        prop="updateTime"
        label="日期"
        width="300">
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名"
        width="300">
      </el-table-column>
      <el-table-column
        label="操作"
        width="300">
        <template scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBlock">
      <el-pagination
        layout="prev, pager, next"
        @current-change="fetchData"
        :page-size="6"
        :total="labelCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  export default {
    name: 'LabelManager',
    data () {
      return {
        tagName: '',
        loading: true,
        labelCount: 0
      }
    },
    beforeCreate () {
      this.loading = true
    },
    created () {
      this.$store.dispatch('getLabelDatas', {page: 1})
      .then(() => {
        this.loading = false
      })
      this.$store.dispatch('getAllTags')
    },
    computed: {
      ...mapGetters([
        'labelData',
        'notice',
        'labelErr',
        'tags'
      ])
    },
    watch: {
      tags (val) {
        this.labelCount = val.length
      },
      labelData (val) {
        this.labelData = val
      },
      notice (val) {
        console.log('notice', val)
        this.$message({
          message: val[val.length - 1].msg,
          type: 'success'
        })
      },
      labelErr (val) {
        this.$message.error(val[val.length - 1].msg)
        this.loading = false
      }
    },
    methods: {
      ...mapActions([
        'getLabelDatas',
        'deleteLabel',
        'addLabel',
        'getAllTags'
      ]),
      fetchData (currentPage) {
        this.$store.dispatch('getLabelDatas', {page: currentPage})
      },
      deleteRow (index, row) {
        this.$confirm('将删除该标签，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'wraning'
        })
        .then(() => {
          this.$store.dispatch('deleteLabel', {labelId: row.id})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      addLabel () {
        this.$confirm('将添加该标签，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'wraning'
        })
        .then(() => {
          this.$store.dispatch('addLabel', {tagName: this.tagName, userId: 14})
          .then(() => {
            this.tagName = ''
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          })
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .label-wrapper
    margin: 100px auto
    width: 910px
    .searchBlock
      margin-bottom: 40px
      .labelInput
        width: 200px
    .pageBlock
      float: right
</style>
